<template>
  <el-container>
    <div class="abs">
      <el-tabs
        type="border-card"
        style="margin: 0 20px; height: 93vh"
        v-model="activeName"
      >
        <el-tab-pane label="数据预警日志" name="数据预警日志">
          <el-form inline :model="form">
            <el-form-item label="开始时间">
              <el-date-picker
                type="datetime"
                placeholder="选择开始时间"
                size="mini"
                v-model="form.startTime"
                default-time="00:00:00"
                :picker-options="startTimePicker"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间">
              <el-date-picker
                type="datetime"
                placeholder="选择结束时间"
                size="mini"
                v-model="form.endTime"
                default-time="00:00:00"
                :picker-options="endTimePicker"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="站点名称">
              <el-input
                v-model="form.sensorName"
                placeholder="请输入站点名称"
                size="mini"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="info" size="mini" @click="search(1)"
                >查询</el-button
              >
            </el-form-item>
            <el-form-item>
              <el-button
                type="warning"
                size="mini"
                @click="exportExcel('#tab', '数据预警日志')"
                >导出</el-button
              >
            </el-form-item>
          </el-form>
          <el-table
            :data="tableData"
            stripe
            id="tab"
            :row-style="{ height: '20px' }"
            :cell-style="{ padding: '7px' }"
            v-loading="loading"
          >
            <el-table-column
              label="站点名称"
              prop="sensorName"
              align="center"
            ></el-table-column>
            <el-table-column
              label="预警日志"
              prop="remark"
              align="center"
              width="500"
            ></el-table-column>
            <el-table-column
              label="预警时间"
              prop="warnTime"
              align="center"
            ></el-table-column>
            <el-table-column
              label="处理方式"
              prop="warnDeals"
              align="center"
            ></el-table-column>
            <el-table-column
              label="处理人"
              prop="person"
              align="center"
            ></el-table-column>
            <el-table-column
              label="处理时间"
              prop="dealTime"
              align="center"
            ></el-table-column>
            <el-table-column
              label="备注"
              prop="comment"
              align="center"
            ></el-table-column>
          </el-table>
          <el-row type="flex" justify="end">
            <el-col :span="10">
              <el-pagination
                background
                :current-page="pageData.currentPage"
                layout="total, prev, pager, next, jumper"
                :total="pageData.count"
                :page-size="pageData.pageSize"
                @current-change="handleCurrentChange"
                v-if="pageData.count && pageData.count != 0"
              >
              </el-pagination>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="设备预警日志" name="设备预警日志">
          <el-form inline :model="form2">
            <el-form-item label="开始时间">
              <el-date-picker
                type="datetime"
                placeholder="选择开始时间"
                size="mini"
                v-model="form2.startTime"
                default-time="00:00:00"
                :picker-options="startTimePicker2"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间">
              <el-date-picker
                type="datetime"
                placeholder="选择结束时间"
                size="mini"
                v-model="form2.endTime"
                default-time="00:00:00"
                :picker-options="endTimePicker2"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="站点名称">
              <el-input
                v-model="form2.equipmentName"
                placeholder="请输入站点名称"
                size="mini"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="info" size="mini" @click="search2(1)"
                >查询</el-button
              >
            </el-form-item>
            <el-form-item>
              <el-button
                type="warning"
                size="mini"
                @click="exportExcel('#tab2', '设备预警日志')"
                >导出</el-button
              >
            </el-form-item>
          </el-form>
          <el-table
            :data="tableData2"
            stripe
            id="tab2"
            :row-style="{ height: '20px' }"
            :cell-style="{ padding: '7px' }"
            v-loading="loading2"
          >
            <el-table-column
              label="站点名称"
              prop="equipmentName"
              align="center"
            ></el-table-column>
            <el-table-column
              label="预警日志"
              prop="warnRemark"
              align="center"
              width="500"
            ></el-table-column>
            <el-table-column
              label="预警时间"
              prop="warnTime"
              align="center"
            ></el-table-column>
            <el-table-column
              label="处理方式"
              prop="warnDeals"
              align="center"
            ></el-table-column>
            <el-table-column
              label="处理人"
              prop="person"
              align="center"
            ></el-table-column>
            <el-table-column
              label="处理时间"
              prop="dealTime"
              align="center"
            ></el-table-column>
            <el-table-column
              label="备注"
              prop="comment"
              align="center"
            ></el-table-column>
          </el-table>
          <el-row type="flex" justify="end">
            <el-col :span="10">
              <el-pagination
                background
                :current-page="pageData2.currentPage"
                layout="total, prev, pager, next, jumper"
                :total="pageData2.count"
                :page-size="pageData2.pageSize"
                @current-change="handleCurrentChange2"
                v-if="pageData2.count && pageData2.count != 0"
              >
              </el-pagination>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="阈值管理日志" name="阈值管理日志">
          <el-form inline :model="form3">
            <el-form-item label="开始时间">
              <el-date-picker
                type="datetime"
                placeholder="选择开始时间"
                size="mini"
                v-model="form3.startTime"
                default-time="00:00:00"
                :picker-options="startTimePicker3"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间">
              <el-date-picker
                type="datetime"
                placeholder="选择结束时间"
                size="mini"
                v-model="form3.endTime"
                default-time="00:00:00"
                :picker-options="endTimePicker3"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="站点名称">
              <el-input
                v-model="form3.sensortName"
                placeholder="请输入站点名称"
                size="mini"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="info" size="mini" @click="search3(1)"
                >查询</el-button
              >
            </el-form-item>
            <el-form-item>
              <el-button
                type="warning"
                size="mini"
                @click="exportExcel('#tab3', '阈值管理日志')"
                >导出</el-button
              >
            </el-form-item>
          </el-form>
          <el-table
            :data="tableData3"
            stripe
            id="tab3"
            :row-style="{ height: '20px' }"
            :cell-style="{ padding: '7px' }"
            v-loading="loading3"
          >
            <el-table-column
              label="站点名称"
              prop="sensorName"
              align="center"
            ></el-table-column>
            <el-table-column
              label="监测体名称"
              prop="monitorName"
              align="center"
            ></el-table-column>
            <el-table-column
              label="业务名称"
              prop="moduleEnum"
              align="center"
            ></el-table-column>
            <el-table-column
              label="预警类型"
              prop="statisticType"
              align="center"
            ></el-table-column>
            <el-table-column
              label="阈值修改内容"
              prop="updateContent"
              align="center"
              width="350"
            ></el-table-column>
            <el-table-column
              label="处理人"
              prop="person"
              align="center"
            ></el-table-column>
            <el-table-column
              label="处理时间"
              prop="updateTime"
              align="center"
            ></el-table-column>
            <el-table-column
              label="备注"
              prop="comment"
              align="center"
            ></el-table-column>
          </el-table>
          <el-row type="flex" justify="end">
            <el-col :span="10">
              <el-pagination
                background
                :current-page="pageData3.currentPage"
                layout="total, prev, pager, next, jumper"
                :total="pageData3.count"
                :page-size="pageData3.pageSize"
                @current-change="handleCurrentChange3"
                v-if="pageData3.count && pageData3.count != 0"
              >
              </el-pagination>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </div>
  </el-container>
</template>

<script>
import Axios from "axios";
import moment from "moment";
import FileSaver from "file-saver";
import XLSX from "xlsx";
import * as serviceApi from "../../common/service.config";
Axios.defaults.withcredentials = true;

export default {
  name: "WarningLog",
  data() {
    return {
      activeName: "数据预警日志",
      form: {
        startTime: null,
        endTime: moment().format("YYYY-MM-DD 00:00:00"),
        startTimeMin: null,
        sensorName: "",
      },
      tableData: null,
      pageData: {
        currentPage: null,
        count: null,
        pageSize: null,
      },
      form2: {
        startTime: null,
        endTime: moment().format("YYYY-MM-DD 00:00:00"),
        startTimeMin: null,
        equipmentName: "",
      },
      tableData2: null,
      pageData2: {
        currentPage: null,
        count: null,
        pageSize: null,
      },
      form3: {
        startTime: null,
        endTime: moment().format("YYYY-MM-DD 00:00:00"),
        startTimeMin: null,
        sensorName: "",
      },
      tableData3: null,
      pageData3: {
        currentPage: null,
        count: null,
        pageSize: null,
      },
      loading: null,
      loading2: null,
      loading3: null,
    };
  },
  computed: {
    startTimePicker() {
      return {
        disabledDate: (time) =>
          this.form.startTime
            ? time.getTime() < new Date(this.form.startTimeMin).getTime() ||
              time.getTime() > new Date(this.form.endTime).getTime()
            : false,
      };
    },
    endTimePicker() {
      return {
        disabledDate: (time) =>
          this.form.endTime
            ? time.getTime() > new Date().getTime() ||
              time.getTime() < new Date(this.form.startTime).getTime()
            : false,
      };
    },
    startTimePicker2() {
      return {
        disabledDate: (time) =>
          this.form2.startTime
            ? time.getTime() < new Date(this.form2.startTimeMin).getTime() ||
              time.getTime() > new Date(this.form2.endTime).getTime()
            : false,
      };
    },
    endTimePicker2() {
      return {
        disabledDate: (time) =>
          this.form2.endTime
            ? time.getTime() > new Date().getTime() ||
              time.getTime() < new Date(this.form2.startTime).getTime()
            : false,
      };
    },
    startTimePicker3() {
      return {
        disabledDate: (time) =>
          this.form3.startTime
            ? time.getTime() < new Date(this.form3.startTimeMin).getTime() ||
              time.getTime() > new Date(this.form3.endTime).getTime()
            : false,
      };
    },
    endTimePicker3() {
      return {
        disabledDate: (time) =>
          this.form3.endTime
            ? time.getTime() > new Date().getTime() ||
              time.getTime() < new Date(this.form3.startTime).getTime()
            : false,
      };
    },
  },
  methods: {
    exportExcel(dom, title) {
      /* out-table关联导出的dom节点  */
      var wb = XLSX.utils.table_to_book(document.querySelector(dom));
      /* get binary string as output */
      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
      });
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: "application/octet-stream" }),
          `${title}.xlsx`
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    },
    queryDataWarning(list) {
      for (let i = 0, len = list.length; i < len; i++) {
        list[i].warnTime = moment(list[i].warnTime).format(
          "YYYY-MM-DD HH:mm:ss"
        );
        if (list[i].warnDeal == "00") {
          list[i].warnDeals = "数据恢复正常";
        } else if (list[i].warnDeal == "01") {
          list[i].warnDeals = "1小时内不预警";
        } else if (list[i].warnDeal == "02") {
          list[i].warnDeals = "6小时内不预警";
        } else if (list[i].warnDeal == "03") {
          list[i].warnDeals = "1天内不预警";
        } else if (list[i].warnDeal == "04") {
          list[i].warnDeals = "3天内不预警";
        } else if (list[i].warnDeal == "05") {
          list[i].warnDeals = "7天内不预警";
        }
        if (list[i].dealTime != null) {
          list[i].dealTime = moment(list[i].dealTime).format(
            "YYYY-MM-DD HH:mm:ss"
          );
        }
      }
      this.tableData = list;
    },
    search(currentPage) {
      this.loading = true;
      let queryData = {
        sensorName: this.form.sensorName,
        startTime: moment(this.form.startTime).format("YYYY-MM-DD"),
        endTime: moment(this.form.endTime).format("YYYY-MM-DD"),
      };
      Axios({
        url: serviceApi.KB_API,
        method: "post",
        data: `appMsg={"parameter":"{\\"page\\":{\\"currentPage\\":\\"${currentPage}\\",\\"pageSize\\":10},\\"sensorName\\":\\"${queryData.sensorName}\\",\\"startTime\\":\\"${queryData.startTime}\\",\\"endTime\\":\\"${queryData.endTime}\\"}","serviceCode":"listDataWarningByPage","timestamp":"","uuid":""}`,
      }).then((res) => {
        this.loading = false;
        this.pageData = res.data.parameter.page;
        this.queryDataWarning(res.data.parameter.list);
      });
    },
    handleCurrentChange(val) {
      this.search(val);
    },
    querySensorWarning(list) {
      for (let i = 0, len = list.length; i < len; i++) {
        list[i].warnTime = moment(list[i].warnTime).format(
          "YYYY-MM-DD HH:mm:ss"
        );
        if (list[i].warnDeal == "00") {
          list[i].warnDeals = "数据恢复正常";
        } else if (list[i].warnDeal == "01") {
          list[i].warnDeals = "1小时内不预警";
        } else if (list[i].warnDeal == "02") {
          list[i].warnDeals = "6小时内不预警";
        } else if (list[i].warnDeal == "03") {
          list[i].warnDeals = "1天内不预警";
        } else if (list[i].warnDeal == "04") {
          list[i].warnDeals = "3天内不预警";
        } else if (list[i].warnDeal == "05") {
          list[i].warnDeals = "7天内不预警";
        }
        if (list[i].dealTime != null) {
          list[i].dealTime = moment(list[i].dealTime).format(
            "YYYY-MM-DD HH:mm:ss"
          );
        }
      }
      this.tableData2 = list;
    },
    search2(currentPage) {
      this.loading2 = true;
      let queryData = {
        equipmentName: this.form2.equipmentName,
        startTime: moment(this.form2.startTime).format("YYYY-MM-DD"),
        endTime: moment(this.form2.endTime).format("YYYY-MM-DD"),
      };
      Axios({
        url: serviceApi.KB_API,
        method: "post",
        data: `appMsg={"parameter":"{\\"page\\":{\\"currentPage\\":${currentPage},\\"pageSize\\":10},\\"equipmentNumber\\":\\"\\",\\"startTime\\":\\"${queryData.startTime}\\",\\"endTime\\":\\"${queryData.endTime}\\",\\"equipmentName\\":\\"${queryData.equipmentName}\\"}","serviceCode":"listEquipmentWarningByPage","timestamp":"","uuid":""}`,
      }).then((res) => {
        this.loading2 = false;
        this.pageData2 = res.data.parameter.page;
        this.querySensorWarning(res.data.parameter.list);
      });
    },
    handleCurrentChange2(val) {
      this.search2(val);
    },
    queryWarningLog(list) {
      for (let i = 0, len = list.length; i < len; i++) {
        if (list[i].moduleEnum == "00") {
          list[i].moduleEnum = "卫星业务";
        } else if (list[i].moduleEnum == "01") {
          list[i].moduleEnum = "岩土业务";
        }
        if (list[i].statisticType == "00") {
          list[i].statisticType = "累计值预警";
        } else if (list[i].statisticType == "01") {
          list[i].statisticType = "相对值预警";
        } else if (list[i].statisticType == "02") {
          list[i].statisticType = "中误差预警";
        }
        if (list[i].updateTime != null) {
          list[i].updateTime = moment(list[i].updateTime).format(
            "YYYY-MM-DD HH:mm:ss"
          );
        }
      }
      this.tableData3 = list;
    },
    search3(currentPage) {
      this.loading3 = true;
      let queryData = {
        sensorName: this.form3.sensorName,
        startTime: moment(this.form3.startTime).format("YYYY-MM-DD"),
        endTime: moment(this.form3.endTime).format("YYYY-MM-DD"),
      };
      Axios({
        url: serviceApi.KB_API,
        method: "post",
        data: `appMsg={"parameter":"{\\"page\\":{\\"currentPage\\":\\"${currentPage}\\",\\"pageSize\\":10},\\"sensorName\\":\\"${queryData.sensorName}\\",\\"startTime\\":\\"${queryData.startTime}\\",\\"endTime\\":\\"${queryData.endTime}\\"}","serviceCode":"listWarningLogByPage","timestamp":"","uuid":""}`,
      }).then((res) => {
        this.loading3 = false;
        this.pageData3 = res.data.parameter.page;
        this.queryWarningLog(res.data.parameter.list);
      });
    },
    handleCurrentChange3(val) {
      this.search3(val);
    },
  },
  created() {
    let fun = () => {
      this.loading = true;
      let queryData = {
        sensorName: "",
        startTime: moment().subtract(182, "d").format("YYYY-MM-DD"),
        endTime: moment().format("YYYY-MM-DD"),
      };
      this.form.startTime = moment(queryData.startTime).format(
        "YYYY-MM-DD 00:00:00"
      );
      this.form.startTimeMin = this.form.startTime;
      Axios({
        url: serviceApi.KB_API,
        method: "post",
        data: `appMsg={"parameter":"{\\"page\\":{\\"currentPage\\":\\"1\\",\\"pageSize\\":10},\\"sensorName\\":\\"${queryData.sensorName}\\",\\"startTime\\":\\"${queryData.startTime}\\",\\"endTime\\":\\"${queryData.endTime}\\"}","serviceCode":"listDataWarningByPage","timestamp":"","uuid":""}`,
      }).then((res) => {
        this.loading = false;
        this.pageData = res.data.parameter.page;
        this.queryDataWarning(res.data.parameter.list);
      });
    };
    let fun2 = () => {
      this.loading2 = true;
      let queryData = {
        equipmentName: "",
        startTime: moment().subtract(182, "d").format("YYYY-MM-DD"),
        endTime: moment().format("YYYY-MM-DD"),
      };
      this.form2.startTime = moment(queryData.startTime).format(
        "YYYY-MM-DD 00:00:00"
      );
      this.form2.startTimeMin = this.form2.startTime;
      Axios({
        url: serviceApi.KB_API,
        method: "post",
        data: `appMsg={"parameter":"{\\"page\\":{\\"currentPage\\":1,\\"pageSize\\":10},\\"equipmentNumber\\":\\"\\",\\"startTime\\":\\"${queryData.startTime}\\",\\"endTime\\":\\"${queryData.endTime}\\",\\"equipmentName\\":\\"${queryData.equipmentName}\\"}","serviceCode":"listEquipmentWarningByPage","timestamp":"","uuid":""}`,
      }).then((res) => {
        this.loading2 = false;
        this.pageData2 = res.data.parameter.page;
        this.querySensorWarning(res.data.parameter.list);
      });
    };
    let fun3 = () => {
      this.loading3 = true;
      let queryData = {
        sensorName: "",
        startTime: moment().subtract(182, "d").format("YYYY-MM-DD"),
        endTime: moment().format("YYYY-MM-DD"),
      };
      this.form3.startTime = moment(queryData.startTime).format(
        "YYYY-MM-DD 00:00:00"
      );
      this.form3.startTimeMin = this.form3.startTime;
      Axios({
        url: serviceApi.KB_API,
        method: "post",
        data: `appMsg={"parameter":"{\\"page\\":{\\"currentPage\\":\\"1\\",\\"pageSize\\":10},\\"sensorName\\":\\"${queryData.sensorName}\\",\\"startTime\\":\\"${queryData.startTime}\\",\\"endTime\\":\\"${queryData.endTime}\\"}","serviceCode":"listWarningLogByPage","timestamp":"","uuid":""}`,
      }).then((res) => {
        this.loading3 = false;
        this.pageData3 = res.data.parameter.page;
        this.queryWarningLog(res.data.parameter.list);
      });
    };
    let WarningLog = async () => {
      await fun();
      await fun2();
      await fun3();
    };
    WarningLog();
  },
};
</script>

<style lang='less' scoped>
.el-container {
  width: 100%;
  height: 100%;
  .abs {
    position: absolute;
    left: 0;
    top: 6.4%;
    width: 100%;
    height: 93.6%;
  }
}
</style>
